<%@page import="com.dd.shop4j.goods.enums.GoodStatus"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>添加商品</title>
<%@ include file="../../../common/admin_taglib.jsp" %>
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery-easyui-1.3.3/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="${ctx}/resources/js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
	//添加相册
	var imageTemplate = $(".image_line");
	$("#add_image_btn").click(function(){
		$("#goods_images").append(imageTemplate.clone());
	});
	
	//加载商品分类树
	$("#parentIdTree").combotree({
		url : "${ctx}/admin/categ/gridTree"
	});
	
	//商品属性改变事件
	$("#attrId").change(function(){
		if (this.value == "") {return;}
		$.get("${ctx}/admin/goods/attrDetails/" + this.value, function(datas){
			var items = "";
			for (var i in datas) {
				items += "<tr class='item_"+datas[i].id+"'>";
				items += "<td>" + datas[i].name + "</td>";
				items += "<td><input type='hidden' name='attrDetailIds' value='"+datas[i].id+"'/>";
				if (datas[i].type == "1" && datas[i].attrValue != null) {
					var attrValue = datas[i].attrValue.split(",");
					items += "<select name='attrValues'>";
					for (var j in attrValue) {
						items += "<option>" + attrValue[j] + "</option>";
					}
					items += "</select>";
				} else {
					items += "<input name='attrValues' type='text' class='input-small validate' validate='empty' />";
				}
				items += "&nbsp;&nbsp;<a href='javascript:void(0);' onclick='addItem(this);'>[ + ]</a>";
				items += "</td>";
				items += "</tr>";
			}
			$("#good_attr_details").html(items);
		});
	});
});
//添加一条商品属性
function addItem(t) {
	var a = $(t).parents("td").clone();
	a.find("a").remove();
	var clazz = $(t).parents("tr").attr("class");
	var lastNode = $("#good_attr_details > ." + clazz).last();
	lastNode.after("<tr class='"+clazz+"'><td></td><td>"+a.html().replace("selected=\"selected\"", "")+"<a href='javascript:void(0);' onclick='removeItem(this);'>[ - ]</a></td></tr>");
}
//删除一条商品属性
function removeItem(t) {
	$(t).parents("tr").remove();
}
</script>
<style type="text/css">
.image_line {margin-bottom:10px;}
</style>
</head>
<body>

<h1 class="page-title">Shop4j 管理中心</h1>
<ul class="breadcrumb">
	 <li><a href="${ctx}/admin/main">管理中心</a><span class="divider">/</span></li>
     <li class="active">添加商品</li>
</ul>


<div class="row-fluid">
	<div class="btn-toolbar">
    	<button class="btn btn-primary" onclick="$('#addForm').submit();"><i class="icon-ok"></i> 保存</button>
    	<input class="btn" value="重置" type="reset"/>
  		<div class="btn-group"></div>
	</div>

	<div class="well">
		<ul class="nav nav-tabs">
	      <li class="active"><a href="#goods_info" data-toggle="tab">商品信息</a></li>
	      <li><a href="#goods_description" data-toggle="tab">商品描述</a></li>
	      <li><a href="#goods_images" data-toggle="tab">商品图片</a></li>
	      <li><a href="#goods_attr" data-toggle="tab">商品属性</a></li>
	    </ul>
	    <form method="post" id="addForm" enctype="multipart/form-data">
		<dd:token></dd:token>    
	    <div id="myTabContent" class="tab-content">
	    	<div id="goods_info" class="tab-pane active in">
	    		<label>商品名称</label>
        		<input type="text" name="good.name" class="input-xxlarge">
        		<label>货号</label>
        		<input type="text" name="good.code" class="input-xxlarge">
        		<label>商品名样式</label>
        		<input type="text" name="good.nameStyle" class="input-xxlarge">
        		<label>品牌</label>
        		<select name="good.brandId" class="span2">
        			<option selected="selected" value="">-请选择-</option>
        			<c:forEach items="${brands}" var="b">
        				<option value="${b.id}">${b.name}</option>
        			</c:forEach>
        		</select>
        		<label>分类</label>
        		<input type="text" name="good.categId" id="parentIdTree" class="input-middle" style="height:30px;" />
        		<label style="margin-top: 10px;">商品原价</label>
        		<input type="text" name="good.srcPrice" class="input-xxlarge">
        		<label>商品售价</label>
        		<input type="text" name="good.shopPrice" class="input-xxlarge">
        		<label>促销价</label>
        		<input type="text" name="good.promotePrice" class="input-xxlarge">
        		<label>促销开始时间</label>
        		<input type="text" name="good.promoteStart" id="promoteStart" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',maxDate:$('#promoteEnd').val()})" class="input-large">
        		<label>促销结束时间</label>
        		<input type="text" name="good.promoteEnd" id="promoteEnd" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',minDate:$('#promoteStart').val()})" class="input-large">
        		<label>积分</label>
        		<input type="text" name="good.saleScore" class="input-xxlarge">
        		<label>积分价</label>
        		<input type="text" name="good.scorePrice" class="input-xxlarge">
        		<label>图片上传</label>
        		<input type="file" name="image" class="input-large">
        		<label>库存</label>
        		<input type="text" name="good.goodNum" class="input-xxlarge">
        		<label>库存预警</label>
        		<input type="text" name="good.warnNum" class="input-xxlarge">
        		<label>新精热状态</label>
        		<div class="well">
        			<label class="checkbox_label">
        				<input name="good.newFlag" type="checkbox"/>
        				新品
        			</label>
        			<label class="checkbox_label">
        				<input name="good.bestFlag" type="checkbox"/>
        				精品
        			</label>
        			<label class="checkbox_label">
        				<input name="good.hotFlag" type="checkbox"/>
        				热销
        			</label>
        		</div>
        		<label>商品状态</label>
        		<select name="good.status" class="span2">
        			<%
        			GoodStatus[] ss = GoodStatus.values();
        			for (GoodStatus s : ss) {
        				if (s != GoodStatus.DELETE)
        					out.write("<option value='"+s.getCode()+"'>"+s.getText()+"</option>");
        			}
        			%>
        		</select>
        		<label>上架时间</label>
        		<input type="text" name="good.upTime" id="upTime" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',maxDate:$('#downTime').val()})" class="input-large">
        		<label>下架时间</label>
        		<input type="text" name="good.downTime" id="downTime" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',minDate:$('#upTime').val()})" class="input-large">
        		<label>SEO关键字</label>
        		<input type="text" name="good.seoKeyword" class="input-xxlarge">
        		<label>SEO描述</label>
        		<textarea rows="3" name="good.seoDescription" class="input-xxlarge"></textarea>
	    	</div>
	    	<div id="goods_description" class="tab-pane">
	    		<label>商品描述</label>
	    		<textarea rows="3" name="description.description" class="input-xxlarge"></textarea>
	    		<label>商品详情</label>
	    		<textarea rows="20" name="description.descriptionDetail" class="input-xxlarge"></textarea>
	    	</div>
	    	<div id="goods_images" class="tab-pane">
	    		<a id="add_image_btn" class="btn btn-small btn-info">添加相片</a>
	    		<hr />
	    		<div class="image_line">
	    			<input type="file" name="images" class="input-large"/>
	    			<a onclick="$(this).parent().remove();" class="btn btn-small btn-danger">删除</a>
	    		</div>
	    	</div>
	    	<div id="goods_attr" class="tab-pane">
        		<table style="width:100%;" class="form-horizontal">
        			<thead>
        				<tr>
        					<td width="20%">商品分类</td>
        					<td>
        						<select id="attrId" name="good.attrId">
        							<option selected="selected" value="">-请选择-</option>
        							<c:forEach items="${attrs}" var="a">
        								<option value="${a.id}">${a.name }</option>
        							</c:forEach>
        						</select>
        					</td>
        				</tr>
        				<tr>
        					<td colspan="2">
        						<hr />
        					</td>
        				</tr>
        			</thead>
        			<tbody id="good_attr_details"></tbody>
        		</table>
	    	</div>
	    </div>
	    </form>
	</div>
</div>

</body>
</html>
        			